<template>
	<view>
		<view class="box" style="height: 380rpx;padding: 20px 10px;background: url(../../static/trifle/header-bg.png); background-size: 100% 100%;">
			<navbar @height="navheight">
				<view slot="header">
					<view @click="back" style="width: 30px;height: 45px;line-height: 45px;margin-left: 0px;"><u-icon name="arrow-left" size="30" color="#ffffff"></u-icon></view>
				</view>
			</navbar>
			<view :style="{ height: zanheight + 'px' }"></view>
			<view class="f16 fb cf">陪Ta一起打卡</view>
			<view class="flex cf">
				<view class="w50 f12" style="padding: 0;">情侣100件小事</view>
				<view class="w50 f12" style="padding: 0;text-align: right;">
					已完成
					<text class="f16">0</text>
					/100
				</view>
			</view>
		</view>
		<view class="content" style="background: url('../../static/sex/bg.png');background-size: 100% 100%;">
			<view class="flex box">
				<view @click="show = true" class="button f12" style="padding: 4px 10px;">{{ textname }}</view>
				<view class="flex f14" style="margin-left: auto;">
					<view @click="suiji" style="font-size: 18rpx;color: #000;display: flex;align-items: center;">
						<image src="../../static/trifle/random.png" mode="" style="width: 44rpx;height: 34rpx;margin-right: 12rpx;"></image>
						随机抽取
					</view>
					<view @click="all('/pages/add/add')" style="margin-left: 10px;font-size: 18rpx;color: #000;display: flex;align-items: center;">
						<image src="../../static/trifle/add.png" mode="" style="width: 27rpx;height: 27rpx;margin-right: 12rpx;"></image>
						添加一件
					</view>
				</view>
			</view>
			<view class="flex" style="text-align: center;width: 90%;margin: 10rpx auto;justify-content: space-between;">
				<view
					@click="dianji(item)"
					class=" box flex cf f12"
					v-for="(item, index) in list"
					:style="{ background: item.lock_switch == 1 ? `url(${cardBgOne})` : `url(${cardBgTwo})`, backgroundSize: '100% 100%' }"
					style=" height: 258rpx;position: relative;padding: 0 10rpx 0 5rpx;width: 33%;justify-content: center;"
				>
					<template v-if="item.lock_switch == 0">
						<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
							
							<view style="color: #fff;">{{ item.name }}</view>
							<view style="position: absolute;z-index:1;width: 100%;bottom:20%;left: 0;text-align: center;color: #fff">点击解锁</view>
						</view>
					</template>
					<template v-if="item.lock_switch == 1">
						<image src="../../static/trifle/fence.png" mode="" style="width: 100%;height: 156rpx;"></image>
						<view style="color: #000">{{ item.name }}</view>
					</template>
				</view>
			</view>
		</view>
		<u-picker @confirm="confirm" mode="selector" v-model="show" :default-selector="[0]" :range="selector"></u-picker>
		<u-popup v-model="shows" mode="center">
			<view style="width: 300px;padding: 20px;">
				<view>和Ta完成这件小事一起为爱加油</view>
				<view>
					<view
						class="w50 box flex a-t j-t cf f12"
						style="background-size: 100% 100%; height: 137px;position: relative;margin: auto; "
						:style="{ backgroundImage: `url(${img4})` }"
					>
						{{ form.name }}
						<!-- <image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/hx.png" mode="widthFix" style="width: 100%;" ></image> -->
					</view>
				</view>
				<button @click="jiesuo" class="button cfff">立即解锁</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import navbar from '@/components/navbar.vue';
// import img3 from "https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/hx.png"
export default {
	comments: {
		navbar
	},
	data() {
		return {
			emoimg: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/emoji/100.gif',
			text: 'hahaha',
			img2: 'https://love-space.oss-cn-chengdu.aliyuncs.com/uploads/20220905/229f8bc7f63068a2a0b69f5d77228d83.png',
			img4: 'https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/hx.png',
			show: false,
			selector: ['全部小事', '未完成', '已解锁', '已完成'],
			list: [],
			textname: '全部小事',
			shows: false,
			form: {},
			title: ' ',
			background: 'rgba(0,0,0,0)',
			zanheight: 0,
			cardBgOne: '../../static/trifle/card-one.png',
			cardBgTwo: '../../static/trifle/card-two.png',
			cardBgThree: '../../static/trifle/card-three.png'
		};
	},
	onLoad() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#fa1e8a'
		});

		// for(let i=100; i<120;i++){
		// 	let img='https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/emoji/'+i+'.gif'
		// 	this.list.push(img)
		// }
	},
	onShow() {
		this.MyThing('0');
	},
	methods: {
		back() {
			uni.navigateBack();
		},
		navheight(e) {
			this.zanheight = e;
		},
		async jiesuo() {
			if (this.form.lock_switch == 0) {
				let data = {
					my_space_id: this.vuex_user_content.id,
					my_thing_id: this.form.id
				};
				let res = await this.$u.api.thingunlock(data);
				this.shows = false;
				this.MyThing('0');
			}
		},
		dianji(e) {
			this.shows = true;
			this.form = e;
		},
		suiji() {
			let t = Math.floor(Math.random() * this.list.length);
			this.dianji(this.list[t]);
		},
		async MyThing(status) {
			let data = {
				my_space_id: this.vuex_user_content.id,
				status: status
			};
			let res = await this.$u.api.MyThing(data);
			console.log(res, 'gggggggg');
			this.list = res;
		},
		confirm(e) {
			console.log(e);
			this.MyThing(e);
			this.textname = this.selector[e];
		},
		all(e) {
			uni.navigateTo({
				url: e
			});
		}
	}
};
</script>

<style scoped lang="scss">
page {
	background: #f0f0f0;
}
.content {
	height: calc(100vh - 380rpx);
	overflow-y: auto;
}
</style>
